<template>
	<view class="buyCar">
		<view class="main">
			<view class="list-card" v-for="(item,index) in list" :key="item.id">
				<view class="info">
					<checkbox-group @change="select(item)">
						<label class="checkbox">
							<checkbox :checked="item.isChecked" :value="item.id" />
						</label>
					</checkbox-group>

					<view class="right">
						<image class="img" :src="item.productPic"></image>
						<view class="info-detail">
							<view class="name">{{item.productName}}</view>
							<view class="code">编号：{{item.memberId}}</view>
							<view class="price">￥{{item.price}}</view>
							<view class="number">数量：{{item.quantity}}</view>
						</view>
					</view>
				</view>
				<view class="stepBox">
					<view class="reduce" @tap="reduce(item,index)">-</view>
					<input class="numbers" type="text" v-model="item.quantity" />
					<view class="add" @tap="add(item,index)">+</view>
				</view>
			</view>

			<view class="bottom">
				<view class="selectAll">
					<view class="text">全选</view>
					<checkbox-group @change="selectAll">
						<label>
							<checkbox :checked="isAllchecked" />
						</label>
					</checkbox-group>
				</view>
				<view class="right">
					<view class="price">合计：￥{{total}}</view>
					<view class="btn" @tap="buy">结算</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		findAllCartItem,
		delCartItems
	} from "../../../api/my/index.js"
	import {addPreOrder} from "../../../api/kind/kindList/index.js"
	import mix from '../../../mixins/index.js'
	export default {
		mixins: [mix],
		data() {
			return {
				list: [],
				isAllchecked: false,

			}
		},
		computed: {
			total() {
				return this.list.reduce((cur, el) => {
					if (el.isChecked) {
						return cur + el.quantity * el.price;
					} else {
						return cur;
					}
				}, 0)
			}
		},
		methods: {
			select(ele) {
				ele.isChecked = !ele.isChecked
				const all = this.list.every(ele => {
					return ele.isChecked == true
				})
				if (all) {
					this.isAllchecked = true
				} else {
					this.isAllchecked = false
				}
			},
			selectAll() {
				this.isAllchecked = !this.isAllchecked
				if (this.isAllchecked == true) {
					this.list.forEach(ele => ele.isChecked = true)
				} else {
					this.list.forEach(ele => ele.isChecked = false)
				}

			},
			reduce(val, index) {
				var _this = this;
				var ids = [];
				ids.push(val.id);
				var num = val.quantity
				num--
				this.list[index].quantity = num
				if (num == 0) {
					uni.showModal({
						content: "是否删除该商品",
						success(res) {
							if (res.confirm) {
								delCartItems(ids).then(res => {
									// console.log(res)
								})
								_this.init()

							} else if (res.cancel) {
								uni.showToast({
									title: "您取消了"
								})
							}
						}
					})
				}

			},
			add(val, index) {
				var num = val.quantity
				num++
				this.list[key].quantity = num
			},
			buy() {
				var current = this.list.filter(ele => ele.isChecked == true)
				var orderInfo = {
					orderList: []
				}
				for (var i = 0; i < current.length; i++) {
					var checkedOne = current[i];
					orderInfo.orderList.push({
						cartId: checkedOne.id,
						productId: checkedOne.productId,
						productQuantity: checkedOne.quantity,
						productSkuId: checkedOne.productSkuId
					});
				}
				addPreOrder(orderInfo).then(res=>{
					if(res.success){
						uni.showToast({
							title:"购买成功，1S后跳转到订单确认页",
							icon:"none"
						});
						setTimeout(()=>{
							uni.navigateTo({
								url:`../order/confrimOrder/confrimOrder?id=${res.data.orderId}`
							})
						},1000)
					}
				})

			},
			init() {
				if (!this.checkLogins()) {
					return
				}

				findAllCartItem().then(res => {
					// console.log(res)
					res.data.items.forEach(ele => ele.isChecked = false)
					this.list = res.data.items

				})
			}

		},
		onLoad() {
			this.init()
		}
	}
</script>

<style lang="scss" scoped>
	.buyCar {
		overflow-y: auto;
		background-color: #F1ECE7;
		padding-bottom: 70px;
		height: 100vh;

		.list-card {
			width: 336px;
			height: 98px;
			padding: 10px 10px;
			border-radius: 12px;
			background-color: #fff;
			margin: 25px auto;
			// box-sizing: border-box;

			.info {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.checkbox {
					width: 20px;
					height: 20px;
				}

				.right {
					display: flex;
					align-items: center;

					.img {
						width: 68px;
						height: 68px;
						margin: 0 20px;
					}

					.info-detail {
						font-size: 11px;
						color: #8d8d8d;

						.name {
							font-size: 13px;
							color: #3e3e3e;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
			}

			.stepBox {
				display: flex;
				justify-content: flex-end;

				.reduce {
					width: 30px;
					height: 30px;
					line-height: 30px;
					text-align: center;
					background-color: #f1ece7;
					font-size: 15px;
					margin: 0 3px;
					border-radius: 50%;
				}

				.numbers {
					width: 45px;
					height: 30px;
					line-height: 30px;
					text-align: center;
					background-color: #f1ece7;
					font-size: 15px;
					margin: 0 3px;
					border-radius: 15px;
				}

				.add {
					width: 30px;
					height: 30px;
					line-height: 30px;
					text-align: center;
					background-color: #f1ece7;
					font-size: 15px;
					margin: 0 3px;
					border-radius: 50%;
				}
			}
		}

		.bottom {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 75px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			background-color: #fff;

			.selectAll {
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}

			.right {
				display: flex;
				align-items: center;

				.btn {
					width: 104px;
					height: 40px;
					line-height: 40px;
					text-align: center;
					font-size: 18px;
					border-radius: 14px;
					margin-left: 10px;
					color: #fff;
					background-color: #354e44;
				}
			}
		}

	}
</style>
